<template>
  <div class="list_item">
    <van-cell>
      <!-- 标题区域的插槽 -->
      <template #title>
        <div class="title-box">
          <!-- 标题 -->
          <span>{{ title }}</span>
          <!-- 单张图片 -->
          <img
            v-if="!content.startsWith('http')"
            :src="cover"
            alt=""
            class="thumb"
          />
          <video
            v-if="content.startsWith('http')"
            width="117"
            height="70"
            preload="auto"
            src="../../assets/mda-pir51htc4ugr3t8y.mp4"
          ></video>
        </div>
      </template>
      <!-- label 区域的插槽 -->
      <template #label>
        <div class="label-box">
          <span
            >作者 {{ author }} &nbsp;&nbsp; {{ cmtCount }} 评论 &nbsp;&nbsp;
            发布日期 {{ time }}</span
          >
          <!-- 关闭按钮 -->
          <!-- <div @click.stop="close">
            <van-icon name="cross" />
          </div> -->
        </div>
      </template>
    </van-cell>
    <!-- 反馈的动作面板 -->
    <van-action-sheet
      get-container="body"
      v-model="show"
      cancel-text="取消"
      :closeable="false"
      @click.stop="stopFloat"
      @closed="isFirst = true"
    >
      <div class="content">
        <!-- 一级反馈面板 -->
        <div v-if="isFirst">
          <van-cell
            v-for="item in actions"
            :key="item.name"
            :title="item.name"
            clickable
            class="center-title"
            @click.stop="onCellClick(item.name)"
          />
        </div>
        <!-- 二级反馈面板 -->
        <div v-else>
          <van-cell
            title="返回"
            clickable
            title-class="center-title"
            @click="isFirst = true"
          />
          <van-cell
            :title="item.label"
            clickable
            title-class="center-title"
            v-for="item in reports"
            :key="item.type"
            @click="reportArticle(item.type)"
          />
        </div>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import reports from "@/api/reports";
import { dislikeArticle, reportArticle } from "@/api/request.js";
import dayjs from "dayjs";
export default {
  name: "ListItem",
  // 自定义属性
  props: {
    // 文章的id
    id: {
      type: [String, Number],
      default: "",
    },
    // 文章的标题
    title: {
      type: String,
      default: "",
    },
    // 作者名字
    author: {
      type: [String, Number],
      default: "",
    },
    // 评论数
    cmtCount: {
      // 通过数组形式，为当前属性定义多个可能的类型
      type: [Number, String],
      default: 0,
    },
    // 发布日期
    time: {
      type: String,
      default: "",
    },
    // 封面的信息对象
    cover: {
      type: String,
      default: "",
    },
    // 文章内容
    content: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      // 是否展示反馈面板
      show: false,
      // 第一个面板的可选项列表
      actions: [
        { name: "不感兴趣" },
        { name: "反馈垃圾内容" },
        { name: "拉黑作者" },
      ],
      // 是否展示第一个反馈面板
      isFirst: true,
      reports,
    };
  },
  created() {
    this.formatTime(new Date());
  },
  methods: {
    // 关闭按钮的点击事件
    close() {
      // this.$toast("抱歉, 该功能已关闭");
      this.show = true;
    },
    // 阻止反馈组件冒泡
    stopFloat(e) {
      e.stopPropagation();
    },
    // 反馈一级选项
    async onCellClick(name) {
      if (name === "不感兴趣") {
        const { data: res } = await dislikeArticle({ target: this.id });
        // console.log(res);
        if (res.message !== "OK") {
          this.show = false;
          return this.$notify({ type: "danger", message: "反馈失败" });
        }

        this.$emit("remove-article", this.id);

        this.show = false;
      } else if (name === "拉黑作者") {
        console.log("拉黑作者");
        this.show = false;
      } else if (name === "反馈垃圾内容") {
        // 展示二级反馈面板
        this.isFirst = false;
      }
    },
    // 举报文章（形参 type 是举报的类型值）
    async reportArticle(type) {
      // 1. 发起举报文章的请求
      const data = {
        target: this.id,
        type: type,
      };

      const { data: res } = await reportArticle(data);
      if (res.message === "OK") {
        this.$toast("操作成功");
        // 2. 炸楼操作，触发自定义事件，把文章 id 发送给父组件
        this.$emit("remove-article", this.id);
      }
      // 3. 关闭动作面板
      this.show = false;
    },
    formatTime(value) {
      console.log("格式化时间", dayjs(value).format("YYYY-MM-DD hh:mm:ss"));
    },
  },
};
</script>

<style lang="less" scoped>
.list_item {
  border-top: 1px solid #ccc;
}

.label-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.thumb {
  // 矩形黄金比例：0.618
  width: 113px;
  height: 70px;
  background-color: #f8f8f8;
  object-fit: cover;
}

.title-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.thumb-box {
  display: flex;
  justify-content: space-between;
}

.center-title {
  text-align: center;
}
</style>
